import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:get/get.dart';
import 'package:sports_new/utils/date_time_utils.dart';
import 'package:sports_new/utils/utils.dart';
import 'package:sports_new/widgets/picture_preview_widget.dart';
import '../../../entity/my/help/feedback_entity.dart';
import '../../../resources/colours.dart';
import '../../../resources/styles.dart';
import '../../../widgets/base/qkd_text.dart';

class FeedbackDetailPage extends StatefulWidget {
  const FeedbackDetailPage({super.key});

  @override
  State<FeedbackDetailPage> createState() => _FeedbackDetailPageState();
}

class _FeedbackDetailPageState extends State<FeedbackDetailPage> {
  FeedbackEntity? entity = Get.arguments;
  final TextStyle titleStyle = const TextStyle(
    fontSize: 16,
    color: Colours.text,
    fontWeight: FontWeight.w500
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: Styles.appBar(title: const QkdText("反馈详情")),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              DefaultTextStyle(
                style: const TextStyle(color: Colours.grey99),
                child: Row(
                  children: [
                    QkdText(
                      DateTime.tryParse(
                        entity?.createTime ?? ""
                      )?.formatedString('yyyy-MM-dd HH:mm') ?? ""
                    ),
                    const Spacer(),
                    QkdText(entity?.status==0?"未回复":"已回复"),
                  ],
                ),
              ).paddingOnly(top: 16),
              QkdText.style(
                "问题类型：${entity?.typeName ?? ""}",style: titleStyle
              ).paddingSymmetric(vertical: 12),
              QkdText.style("问题描述",style: titleStyle).paddingOnly(bottom: 4),
              QkdText(
                entity?.suggest?.split("").map(
                  (e) => RegExp(r'[\u4E00-\u9FA5]').hasMatch(e)?"$e\u200A":e
                ).join() ?? "",
                textAlign: TextAlign.justify,
                color: Colours.text44,
                letterSpacing: -0.8,
                height: 1.6
              ).paddingOnly(bottom: 8),
              if(entity?.images.hasValue??false)
              GridView.count(
                physics: const NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                crossAxisCount: 3,
                crossAxisSpacing: 6,
                mainAxisSpacing: 6,
                children: entity?.images?.split(",").map((e) {
                  return GestureDetector(
                    onTap: () => Get.dialog(PicturePreview(imageUrl: e),useSafeArea: false),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(4),
                      child: CachedNetworkImage(
                        imageUrl: e,
                        fit: BoxFit.cover,
                        placeholder: (context, url) => Container(),
                        errorWidget: (context, url, error) => Container(),
                      ),
                    ),
                  );
                }).toList() ?? [],
              ).paddingOnly(bottom: 16),
              if(entity?.reply != null)...[
                const Divider(color: Colours.greyDD,height: 0.5),
                Row(
                  children: [
                    QkdText.style("处理结果", style: titleStyle),
                    const Spacer(),
                    QkdText(DateTime.tryParse(entity?.replyTime ?? "")?.formatedString('yyyy-MM-dd HH:mm'),
                      color: Colours.grey99
                    ),
                  ],
                ).paddingOnly(top: 16),
                if(entity?.reply?.contains("<") == true)...[
                  Html(
                    data: entity?.reply?.split("").map(
                      (e) => RegExp(r'[\u4E00-\u9FA5]').hasMatch(e)?"$e\u200A":e
                    ).join() ?? "",
                    style: {
                      "body": Style(
                          margin: Margins.zero,
                          padding: HtmlPaddings.zero
                      ),
                      'p': Style(
                          margin: Margins.zero,
                          padding: HtmlPaddings.zero,
                          textAlign: TextAlign.justify,
                          letterSpacing: -0.8,
                          fontSize: FontSize(14),
                          color: Colours.text44
                      ),
                    },
                    extensions: [
                      TagExtension(
                          tagsToExtend: {"img"},
                          builder: (extensionContext) {
                            final e = extensionContext.styledElement;
                            return GestureDetector(
                              onTap: () => Get.dialog(PicturePreview(imageUrl: e?.attributes['src'] ?? ""),
                                  useSafeArea: false),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(8),
                                child: CachedNetworkImage(
                                  imageUrl: e?.attributes['src'] ?? "",
                                  width: Get.width,
                                  fit: BoxFit.cover,
                                  placeholder: (context,url) => Container(),
                                  errorWidget: (context,url,error) => Container(),
                                ),
                              ),
                            );
                          }
                      ),
                    ],
                  )
                ]else...[
                  QkdText(entity?.reply?.split("").map(
                          (e) => RegExp(r'[\u4E00-\u9FA5]').hasMatch(e)?"$e\u200A":e
                  ).join() ?? "",
                      textAlign: TextAlign.justify,
                      color: Colours.text44,letterSpacing: -0.8
                  )
                ]
              ],

            ]
          ),
        ),
      )
    );
  }
}
